
		window.onload = function(){
			
				let  p = new Pbl('#container')
				
				console.log(p)
			
			
	
		}
		
		
		class Pbl{
			constructor(sel) {
			    this.sel = sel;
			    this.el = document.querySelector(this.sel);
					
					this.boxs = this.el.querySelectorAll('.box')
					
					this.clientWidth = document.documentElement.clientWidth
					this.imgWidth = this.boxs[0].offsetWidth
					
					this.col = Math.floor(this.clientWidth/this.imgWidth)
					console.log(this.col)
					
					
					this.heightArray  = []
					
					for(let i=0;i<this.col;i++){
						this.heightArray.push(this.boxs[i].offsetHeight);
					}
					console.log(this.heightArray)
					
					
					
					for(let i=this.col;i<this.boxs.length;i++){
						let box = this.boxs[i]
						
						let min = Math.min(...this.heightArray)
						let minIndex = this.heightArray.indexOf(min)
						console.log(min,minIndex)
						box.style.position ='absolute'
						let top = min;
						let left = minIndex * this.imgWidth;
						box.style.left = left +'px'
						box.style.top  = top +'px'
						
						this.heightArray[minIndex] = min + box.offsetHeight;
					}
					
			}
		}
		console.log(11)
		// let url=`https://www.fastmock.site/mock/0e270c82e5df85f9cc92aed4424fc9ec/xx01/PX`
		// $.ajax({
		// 	url:url,
		// 	type:"get",
		// 	success:function (res) {
		// 	           let obj=res.data.list
		// 								let html=''
		// 								obj.forEach(v=>{
		// 									html+=`
		// 									<div class="box">
		// 										<div class="item">
		// 									<dl>
		// 										<dt><img src="${v.image}" alt=""></dt>
		// 										<dd>${v.name}</dd>
		// 										<dd>${v.address}</dd>
		// 									</dl>
		// 									</div>
		// 									</div>
		// 									`
		// 								})
		// 								container.innerHTML+=html
		// 	       },
		// 	       error:function (error) {
		// 	           console.log(error);
		// 	       }
		// })